import { Outlet } from 'react-router-dom'
import { Menu, MenuProps, Layout, Button, theme } from 'antd'
import {
  AppstoreOutlined,
  UserOutlined,
  HomeFilled,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ApiOutlined,
} from '@ant-design/icons'
import { useState } from 'react'
type MenuItem = Required<MenuProps>['items'][number]
const { Header, Sider, Content } = Layout

export default function LayoutView() {
  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e)
  }
  const items: MenuItem[] = [
    {
      key: 'sub1',
      label: '主页',
      icon: <HomeFilled />,
    },
    {
      key: 'sub2',
      label: '个人空间',
      icon: <UserOutlined />,
    },
    {
      key: 'grp',
      label: '探索',
      type: 'group',
      children: [
        { key: '13', label: '应用市场', icon: <AppstoreOutlined /> },
        { key: '14', label: '插件广场', icon: <AppstoreOutlined /> },
        { key: '15', label: '开放api', icon: <ApiOutlined /> },
      ],
    },
  ]
  const [collapsed, setCollapsed] = useState(false)
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        breakpoint="lg"
        onBreakpoint={setCollapsed}
        style={{
          background: colorBgContainer,
        }}
      >
        <Menu
          onClick={onClick}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          items={items}
          className="flex-1"
        />
      </Sider>

      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}
